<template>
    <div>
     <el-breadcrumb separator-class="el-icon-arrow-right"> 
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form :inline="true">
          <el-form-item>
          <el-button type="primary" @click='add'>添加用户</el-button>
        </el-form-item>
        <el-form-item>
          <el-input style="width:300px;" v-model="page.query"  placeholder="请输入内容">
            <el-button slot="append" @click="userlist"  icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <el-table
    :data="user"
    style="width: 100%">
    <el-table-column
      type='index'
      label="#"
      width="150">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="150">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="电话"
      width="150">
    </el-table-column>
    <el-table-column
      prop="role_name"
      label="角色"
      width="150">
    </el-table-column>
    <el-table-column
      prop="mg_state"
      label="状态"
      width="150">
      <template slot-scope='scope'>
   <!-- {{scope.row.mg_state}} -->
<el-switch
  v-model="scope.row.mg_state"
  active-color="#13ce66"
   @change='state(scope.row.id,scope.row.mg_state)'
  inactive-color="#ff4949">
</el-switch>

      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <el-button type="primary" @click='edit(scope.row.id,scope.$index)' icon="el-icon-edit"></el-button>
        <el-button type="warning" @click='rolse(scope.row.id, scope.$index)' icon="el-icon-setting"></el-button>
        <el-button type="danger" @click='del(scope.row.id)' icon="el-icon-delete"></el-button>
      </template>
    </el-table-column>
  </el-table>
   <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="pagesize"
      @current-change="pagenum"
      :current-page="page.pagenum"
      :page-sizes="[1, 3, 6, 9,12]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
  </div>
</el-card>

<el-dialog title="修改用户" :visible.sync="editshow">
  <el-form :model="form" ref="editUser">
    <el-form-item label="用户名">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="手机">
      <el-input v-model="form.mobile"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click='editshow=false'>取 消</el-button>
    <el-button type="primary" @click='editUser'>修改用户</el-button>
  </div>
</el-dialog>

<el-dialog title="分配角色" :visible.sync="fxisshow">
  <label>当前的用户</label>:{{name}} <br><br>
        <label>当前的角色</label>:{{role_name}}<br><br>
        <label>分配新角色</label> :
        <select v-model="roles_id">
          <option value='请选择' selected>请选择</option>
          <option :value='item.id' v-for="(item,index) in rol" :key="index">{{ item.roleName }}</option>
        </select>
        <template v-slot:footer>
          <el-button @click="fxisshow = false">取 消</el-button>
          <el-button type="primary" @click='rolseAdd'>确定</el-button>
        </template>
</el-dialog>




<el-dialog title="添加用户" :visible.sync="isshow">
  <el-form :model="addform" ref="Adduser">
    <el-form-item label="用户名">
      <el-input v-model="addform.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="addform.password"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="addform.email"></el-input>
    </el-form-item>
    <el-form-item label="手机">
      <el-input v-model="addform.mobile"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click='isshow=false'>取 消</el-button>
    <el-button type="primary" @click='Adduser'>添加</el-button>
  </div>
</el-dialog>
    </div>
</template>

<script>
import {
  userlist,
  delUser,
  editUsers,
  changeStatus,
  addUsers,
  getRoles
} from "../api/api.js";
export default {
  data() {
    return {
      user: [],
      rol:[],
      page: {
        pagenum: 1,
        pagesize: 4,
        query: ""
      },
      fxisshow:false,
      form: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      addform: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      role_name:'',
      name:'',
      roles_id:'',
      isshow: false,
      count: 0,
      editshow: false
    };
  },

  mounted() {
    this.userlist();
  },
  methods: {
    async userlist() {
      let res = await userlist(this.page);
      this.user = res.data.users;
      this.count = res.data.total;
      console.log(res);
    },

   Adduser(){
        this.$refs['Adduser'].validate(async (valid) => {
          if (valid) {
            let res=await addUsers(this.addform)
            console.log(res)
            if(res.meta.status==201){
               this.$message.success(res.meta.msg)
               this.userlist();
               this.isshow=false
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

    },
    async rolse(id,index){
       this.fxisshow=!this.fxisshow;
       this.name=this.user[index].username;
       this.role_name = this.user[index].role_name;
       let res = await getRoles(); 
      console.log(res);
      this.rol = res.data; 
      this.user_id = id;
    },
    async rolseAdd(){
         if(this.roles_id=='请选择'){
           this.$message.error("请选择新角色");
         }else{
           this.fxisshow=!this.fxisshow
           let res=await getRoles(this.user_id,this.roles_id)
           console.log(res)
           if(res.meta.status==200){
             this.$message.success(res.meta.msg)
           }
         }
    },
    del(id) {
      this.$confirm("确认删除这个用户吗?").then(async () => {
        let res = await delUser(id);
        console.log(res);
        if (res.meta.status == 200) {
          this.$message.success(res.meta.msg);
          this.userlist();
        }
      });
    },
    add() {
      this.isshow = !this.isshow;
    },
   async state(id,state){
          let res=await changeStatus(id,state)
          console.log(res)
          if(res.meta.status==200){
            this.$message.success(res.meta.msg)
          }
    },
    edit(id, index) {
      this.editshow = !this.editshow;
      this.form = {
        username: this.user[index].username,
        password: 123456,
        email: this.user[index].email,
        mobile: this.user[index].mobile
      };
      this.id = id;
    },
    editUser() {
      this.$refs.editUser.validate(async valid => {
        if (valid) {
          let res = await editUsers(this.id, this.form);
          console.log(res);
          if (res.meta.status == 200) {
            this.$message.success(res.meta.msg);
            this.userlist();
            this.editshow = false;
          }
        } else {
          return false;
        }
      });
    },
    
    pagesize(pagesize) {
      this.page.pagesize = pagesize;
      this.userlist();
    },
    pagenum(pagenum) {
      this.page.pagenum = pagenum;
      this.userlist();
    },
    async status(id, type) {
      let res = await changeStatus(id, type);
    }
  }
};
</script>

<style lang='scss' scoped >
</style>
